<template>
    <div ref="chartDom" :style="{ width: '100%', height: '400px' }"></div>
  </template>
  
  <script setup>
  import * as echarts from 'echarts'
  import { onMounted, ref, watch } from 'vue'
  
  // 接收传入的年份
  const props = defineProps({
    year: {
      type: Number,
      required: true
    }
  })
  
  const chartDom = ref()
  let chart
  
  const initChart = (filteredDataIn, filteredDataOut) => {
    chart = echarts.init(chartDom.value)
    chart.setOption({
      title: {
        text: `季度流失与新增客户数量统计 - ${props.year}年`,
        left: 'center'
      },
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
      },
      legend: {
        left: 'left'
      },
      xAxis: {
        name: '人数',
        type: 'value',
      },
      yAxis: {
        name: '季度',
        type: 'category',
        data: ['第一季度', '第二季度', '第三季度', '第四季度'], 
        axisLabel: {
          interval: 0,
        }
      },
      toolbox: {
        show: true,
        feature: {
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: '新增',
          type: 'bar',
          stack: '总量',
          label: {
            show: true,
          },
          emphasis: {
            focus: 'series'
          },
          data: filteredDataIn.quarterlyCounts, // 过滤后的数据
          itemStyle: {
            color: '#28A1FFB3'
          }
        },
        {
          name: '流失',
          type: 'bar',
          stack: '总量',
          label: {
            show: true,
          },
          emphasis: {
            focus: 'series'
          },
          data: filteredDataOut.quarterlyCounts, // 过滤后的数据
          itemStyle: {
            color: '#9a9a9a'
          }
        }
      ]
    })
  }
  
  // 过滤季度新增人数
  const filterDataByYearIn = (year) => {
    // 模拟过滤后的数据（根据实际需求，你可以从 API 获取数据）
    const allData = {
        2024: {
            quarterlyCounts: [179, 229, 135, 206]
        },
        2023: {
            quarterlyCounts: [156, 215, 125, 184]
        },
        2022: {
            quarterlyCounts: [110, 242, 158, 177]
        },
        2021: {
            quarterlyCounts: [132, 171, 199, 198]
        },
        2020: {
            quarterlyCounts: [148, 186, 162, 179]
        }
    };
  
    return allData[year] || { quarterlyCounts: [] }
  }
  
  // 过滤季度流失人数
  const filterDataByYearOut = (year) => {
    // 模拟过滤后的数据（根据实际需求，你可以从 API 获取数据）
    const allData = {
        2024: {
            quarterlyCounts: [-137, -116, -145, -168]
        },
        2023: {
            quarterlyCounts: [-185, -129, -169, -174]
        },
        2022: {
            quarterlyCounts: [-122, -145, -133, -160]
        },
        2021: {
            quarterlyCounts: [-139, -134, -149, -153]
        },
        2020: {
            quarterlyCounts: [-125, -145, -128, -157]
        }
    };
  
    return allData[year] || { quarterlyCounts: [] }
  }
  
  watch(() => props.year, (newYear) => {
    const filteredDataIn = filterDataByYearIn(newYear)
    const filteredDataOut = filterDataByYearOut(newYear)
    initChart(filteredDataIn, filteredDataOut)
  })
  
  onMounted(() => {
    const filteredDataIn = filterDataByYearIn(props.year)
    const filteredDataOut = filterDataByYearOut(props.year)
    initChart(filteredDataIn, filteredDataOut)
  })
  </script>
  
  <style scoped>
  /* Add any specific styles here */
  </style>
  